<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			[v-cloak] {
				display: none;
			}
			.box1{
				width: 500px;
				margin: 100px;
				min-height: 100px;
				border: 1px solid yellow;
			}
			
			.box2{
				width: 500px;
				height:	60px;
				border: 1px solid yellow;
				overflow: hidden;
			}
			
			.box2>div {
				float: left;
				line-height: 60px;
				padding: 0 10px;
			}
			.hi{
				line-height: 40px;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.box1-box2,
			.box1-box2-to {
				left: 0;
				opacity: 1;
			}
			
			.box1-box2-active,
			.box1-enter-active {
				transition: all .3s;
			}
			
			.box1-box2-to {
				left: -200px;
				opacity: 0;
			}
			
			.box1-enter {
				left: 200px;
				opacity: 0;
			}
			
			.box1-enter-to {
				left: 0;
				opacity: 1;
			}
			.box1-enter-active {
				transition: all .4s;
			}
			
			.box1-box2-to {
				left: 200px;
				opacity: 0;
			}
			
			.box2-enter {
				left: -200px;
				opacity: 0;
			}
		</style>
	</head>

	<body>
		<div id="box" v-cloak="">
			<div class="box1">
				<div class="box2">
					<div v-for="(i,$index) in arr" @click="btn($index)" :style="{color:index==$index?'red':''}">
						{{i.title}}
					</div>
				</div>
				<div :style="{position: 'relative',height:arr[index].arr.length*40+'px'}" class="text">
					<transition v-for="(i,$index) in arr" :name="transitionName">
						<div class="hi" v-show="index==$index">
							<p v-for="a in i.arr">{{a.title}}</p>
						</div>
					</transition>
				</div>
			</div>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
		new Vue({
			el: "#box",
			methods: {
				btn($index) {
					if($index > this.index) {
						this.transitionName = 'box1'
					} else {
                        this.transitionName = 'box2'
					}
					this.index = $index
				}
			},
			data: {
				index: 0,
				transitionName: 'box1',
				arr: [{
					title: '星期一',
					arr: [{
						title: '英语'
					}, {
						title: '数学'
					}, {
						title: '语文'
					}, {
						title: '体育'
					}, {
						title: '美术'
					}, {
						title: '化学'
					}, {
						title: '物理'
					}]

				}, {
					title: '星期二',
					arr: [{
						title: '内容1'
					}, {
						title: '内容2'
					}, {
						title: '内容3'
					}, {
						title: '内容4'
					}, {
						title: '内容5'
					}]
				}, {
					title: '星期三',
					arr: [{
						title: '阴天'
					}, {
						title: '晴天'
					}, {
						title: '雨天'
					}]
				}, ]
			}
		})
	</script>

</html>